-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Addon: Knobs] - Performance Fix: added debouncing between keystrokes to speed up component rendering #5811
[Addon: Knobs] - Performance Fix: added debouncing between keystrokes to speed up component rendering #5811
Conversation
…der function is called
This pull request is automatically deployed with Now. |
Codecov Report
@@ Coverage Diff @@
## next #5811 +/- ##
========================================
- Coverage 34.97% 33.98% -1%
========================================
Files 648 651 +3
Lines 9480 9477 -3
Branches 1360 1345 -15
========================================
- Hits 3316 3221 -95
- Misses 5534 5641 +107
+ Partials 630 615 -15
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM?
This seems good, although I wonder if we should use debounce from lodash instead of the handrolled |
Good idea @tmeasday . I agree since Lodash is tried and true and is already being used in the project where debouncing occurs. I've pushed to the branch and updated the PR. Mind taking another look? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
…debouncing [Addon: Knobs] - Performance Fix: added debouncing between keystrokes to speed up component rendering
Issue: #5376
What I did
I added debouncing logic with lodash within the knob changed function to reduce the number of times a component is rendered when the user is typing. The knob changed functionality will only be called if there is a delay of 150ms(slightly faster than the average time between keypress) during user typing. The previous version re-rendered the component upon each keypress. This will help increase performance and is seen mostly when running large components within storybook.
For more information about this PR, please refer to #5376
How to test